<template>
  <div class="container income-container">
    <!-- 头部渐变背景   -->
    <header-bg></header-bg>
    <div class="flex bg-color-white pad-12 border-radius-5">
      <img class="width-80 height-80 border-radius-5 mar-r-10" v-if="fileSpace" :src="goods.mainImage" alt="">
      <div class="flex-item pad-t-2">
        <div class="item-bar-l">
          <div class="title font-w font-15">{{ goods.title }}</div>
          <div class="price font-12 flex flex-baseline">
            <span class="pad-r-2">观众购买价:</span>
            <span class="font-11 price-color">￥</span>
            <span class="font-16 price-color font-w">{{ goods.sellPrice }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex bg-color-white pad-12 border-radius-5 mar-t-10">
      <view class="width-per-100">
        <view class="table font-12">
          <view class="tr">
            <view class="th">等级</view>
            <view class="th">比例</view>
            <view class="th">佣金</view>
          </view>
          <view class="tr" v-for="(item, index) in goods.commissionDetailList" :key="index">
            <view class="td">{{ item.gradeName }}</view>
            <view class="td">{{ item.commissionRate }}%</view>
            <view class="td">{{ item.commission }}元</view>
          </view>
        </view>
      </view>
    </div>
  </div>
</template>

<script>
  import headerBg from '@/components/headerBg'
  import { getGoodsPartnerLevelBeforeCommissionList } from '@/api/shop'
  export default {
    components: { headerBg },
    data() {
      return {
        goods: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.commissionList()
      // this.goods = {
      //   goodsImages: [
      //     {
      //       imageUrl: 'https://img-1.joinsun.vip/upload/71af133ed0cb18a9a67b6d40bf48294c.jpg'
      //     }
      //   ],
      //   title: '明治好习惯巧克力效果说的话手机，号习惯巧克力效果说的治好习惯巧克力效果说的话',
      //   skuFlag: 1,
      //   maxPrice: '5620.20',
      //   sellPrice: '5621.21'
      // }
    },
    mounted() {
    },
    methods: {
      commissionList() {
        getGoodsPartnerLevelBeforeCommissionList({
          goodsId: this.getCurrentPage().query.goodsId,
          customerId: this.getCustomerId,
          roleType: this.getRoleType ? this.getRoleType : ''
        }).then((response) => {
          if (response.isError) return
          this.goods = response.data
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  padding: 12px 10px;
  box-sizing: border-box;
  .bg-color {
    height: 246px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  &.income-container{
    .item-bar-l{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 77px;
    }
    .title{
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      word-break:break-word;
      overflow: hidden;
    }
    .price-color{
      color: #F8303D;
    }
  }
}
</style>
